<template>
  <div class="edit-box">
    <div>
        <el-form label-width="120px" class="form-grid" :model="formData" :rules="rules" ref="form">
          <el-form-item label="区域选择">
            <el-cascader v-model="formData.town_id" :options="optionData" :props="cascaderProps" style="width: 400px;"
              @change="handleChange"></el-cascader>
          </el-form-item>

          <el-form-item label="社区名称">
            <el-input v-model="formData.name" />
          </el-form-item>

          <el-form-item label="社区经度">
            <el-input v-model="formData.longitude" />
          </el-form-item>

          <el-form-item label="社区纬度">
            <el-input v-model="formData.latitude" />
          </el-form-item>
          <el-form-item class="btn-group">
            <el-button type="primary" @click="onSubmit">确认</el-button>
            <el-button type="info" @click="onCancel">取消</el-button>
          </el-form-item>
        </el-form>
    </div>
  </div>
</template>

<script>

export default {
  name: "ReviewDetail",
  props: {
    formData: {
      type: Object,
      required: true,
      default: {
        town_id:'',
        name:'',
        longitude:'',
        latitude:''
      }
    },
    optionData:{
       type:Array,
       required: true,
       //default:[]
    }
  },
  data() {
    return {
      rules: {
        town_id: [
          {required: true, message: '请选择区域', trigger: ''}
        ],
        name: [
          {required: true, message: '请输入社区名称', trigger: 'blur'}
        ],
      },
      cascaderProps: {
        value: 'id',
        label: 'title',
        children: 'child',
        emitPath: false, // 默认是 true，如果你只想拿到最后一级就设为 false
        checkStrictly: false // 是否可选择任意一级，默认 false
      },
      bindData:{
        id:null,
        town_id:'',
        name:'',
        longitude:'',
        latitude:''
      },
    };
  },
  created:{
    this.initData();
  },
  methods: {
    initData(){
      // for (const key in this.bindData) {
      //   if (this.formData.hasOwnProperty(key)) {
      //     this.bindData[key] = this.formData[key];
      //   }
      // }

      Object.assign(this.bindData, this.formData);


    },
    handleChange(val){
      console.log('-change--community-',val)
    },
    onCancel(){
      this.$emit('communityCancel')
    },
    onSubmit(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('community',this.formData)
        } else {
          return false;
        }
      });
    }
  },
};
</script>

<style scoped>
  .edit-box{
    box-sizing: border-box;
    padding: 10px 40px 20px 10px;
  }
.form-grid .el-form-item {
  margin-bottom: 20px;
}
.full-width{
  margin-top: 20px;
}
.full-width .el-input {

  width: 100%;
}
.btn-group {
  text-align: center;
}
</style>
